<template>
  <div>
    <div class="search">
      <van-icon class="search-icon" @click="goBack" size="20" />
      <form action="/">
        <van-search
          v-model="value"
          shape="round"
          show-action
          placeholder="搜索蜜芽商品"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="search-content">
      <div class="search-list history-list">
        <div class="list-icon">
          <van-icon name="eye-o" size="18" />&nbsp;
          <p>
            搜索发现
            <i class="iconfont icon-delete"></i>
          </p>
        </div>
        <div>
          <span>毛绒拖鞋9.9元</span>
          <span>益智玩具</span>
          <span>纸尿裤</span>
          <span>宝宝口粮大集结</span>
        </div>
      </div>
      <div class="search-list hot-list">
        <div class="list-icon"> 
          <van-icon name="apps-o" size="18" />&nbsp;
          <p>常用分类</p>
        </div>
        <div> 
            <img src="" alt="">
            <p>美赞臣 Mea...</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.go(-1)
    },
    goBack(){
    this.$router.go(-1)
    }
  }
};
</script>
<style lang="stylus" scoped>
.search {
  display: flex;
  border-bottom: 1px #eee solid;
}

.search-icon {
  height: 0.2rem;
  line-height: 0.54rem;
  text-align: center;
}

form {
  width: 100%;

  .van-search {
    width: 100%;
  }

  .van-search__content {
    background: #ebebeb;
  }
}

        .search-content {
        width: 100%;
        padding: 0 0.15rem 0 0.15rem;
        box-sizing: border-box;

        .search-list {
        width: 100%;
        color: #686868;

        &.history-list {
            margin-bottom: 20px;
        }

        .list-icon {
            height 0.2rem;
            padding 0.2rem 0;
            margin-bottom 0.2rem;
            p {
                position: relative;
                top: -4px;
                font-size: 0.16rem;
            .icon-delete {
                position: absolute;
                right: 0;
                top: 20px;
                font-size: 34px;
            }
            }
        }

        div {
            display: flex;
            flex-shrink: 0;
            flex-wrap: wrap;

            span {
            padding: 0.08rem 0.1rem;
            margin: 0 0.2rem 0.2rem 0;
            font-size: 0.14rem;
            color: #686868;
            border: 1px #f0f2f5 solid;
            border-radius: 0.15rem;
            }
        }
        }
        }
</style>